<template>
  <div class="h-full">
    <DataScreenHeader
      :title="`月度产量看板(${month}月)`"
      :showMonth="false"
      classes=""
    />

    <div class="h-[100%]">
      <!-- <div style="height: calc(50% - 50px)" class="flex w-[100%]">
        <div
          style="
            height: 100%;
            padding: 10px 10px 10px 20px;
            overflow: hidden;
            flex: 1;
          "
        >
          <dv-border-box13 class="overflow-hidden">
            <div
              dv-bg
              class="flex justify-center items-center m-[20px]"
              style="flex-direction: column"
            >
              <div class="title">
                <span class="text">本月产品生产数量统计</span>
              </div>

              <SingleBarCharts
                v-if="mesProducingMonthBI?.dayList"
                style="width: 100%; height: 400px"
                :yData="mesProducingMonthBI?.quantityList || []"
                :xData="mesProducingMonthBI?.dayList || []"
                :month="month"
              />
            </div>
          </dv-border-box13>
        </div>

        <div
          style="
            height: 100%;
            padding: 10px 20px 10px 4px;
            overflow: hidden;
            flex: 1;
          "
        >
          <dv-border-box13 class="overflow-hidden">
            <div
              dv-bg
              class="flex justify-center items-center m-[20px]"
              style="flex-direction: column"
            >
              <div class="title">
                <span class="text">本月产品生产数量排名</span>
              </div>
              <ScrollTableQuantity
                :planBIDTOS="mesProducingMonthBI?.mesProducingDataDTOS"
                :tableColumnNum="8"
                class="mt-[15px]"
              />
            </div>
          </dv-border-box13>
        </div>
      </div> -->
      <div style="height: calc(100% - 50px - 72px)" class="flex w-[100%]">
        <div
          style="
            height: 100%;
            padding: 20px 10px 10px 20px;
            overflow: hidden;
            flex: 1;
          "
        >
          <dv-border-box13 class="overflow-hidden">
            <div
              dv-bg
              class="flex justify-center items-center m-[20px]"
              style="flex-direction: column"
            >
              <div class="title">
                <span class="text">本月产品不良率</span>
              </div>
              <LightLineCharts
                style="width: 100%; height: 800px"
                v-if="mesProducingMonthBI?.dayList"
                :yData="mesProducingMonthBI?.defectRateList || []"
                :xData="mesProducingMonthBI?.dayList || []"
                :month="month"
              />
            </div>
          </dv-border-box13>
        </div>

        <!-- 下右侧表格 -->
        <div
          style="
            height: 100%;
            padding: 20px 20px 10px 4px;
            overflow: hidden;
            flex: 1;
          "
        >
          <dv-border-box13 class="overflow-hidden">
            <div
              dv-bg
              class="flex justify-center items-center m-[20px]"
              style="flex-direction: column"
            >
              <div class="title">
                <span class="text">本月不良品率</span>
              </div>
              <ScrollTableDefectRate
                :planBIDTOS="mesProducingMonthBI?.mesProducingDefectRateDTO"
                class="mt-[15px]"
                :tableColumnNum="12"
              />
            </div>
          </dv-border-box13>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import ScrollTableQuantity from "../components/ScrollTableQuantity.vue";

defineOptions({
  name: "DATASCREENMES04",
  inheritAttrs: false,
});

const props = defineProps({
  mesProducingMonthBI: {
    type: Object,
    default: () => {},
  },
  refreshRate: {
    type: Number,
    default: () => 0,
  },
});

const emit = defineEmits(["get-info"]);
const { mesProducingMonthBI, refreshRate } = toRefs(props);

let timer: any = ref(null);

const month = ref();
onMounted(() => {
  const date = new Date();
  month.value = String(date.getMonth() + 1); // 因为getMonth()返回的月份是从0开始计数的，所以需要加1

  if (refreshRate.value) {
    timer.value = setInterval(() => {
      emit("get-info");
    }, refreshRate.value * 1000);
  }
});

onBeforeUnmount(() => {
  clearInterval(timer.value);
  timer.value = null;
});
</script>

<style lang="scss" scoped>
.title {
  background-image: url(@/assets/images/screen/title.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left;
  width: 100%;
  height: 50px;
  line-height: 50px;
  .text {
    font-size: 30px;
    line-height: 32px;
    padding-left: 30px;
    font-weight: 600;
    writing-mode: horizontal-tb;
    text-orientation: upright;
    color: transparent;
    background: linear-gradient(
        0deg,
        rgb(255, 255, 255) 0px,
        rgb(255, 255, 255) 100%
      )
      text;
    clip-path: inset(1px);
  }
}
</style>
